<template>
	<view class="content">

		<view class="row b-b">
			<text class="tit">手机号</text>
			<input class="input" type="number" v-model="regData.mobile" placeholder="手机号码" maxlength="11" placeholder-class="placeholder" />
		</view>

		<view class="row b-b">
			<text class="tit">验证码</text>
			<input class="input" style="width: 300upx;" type="number" v-model="regData.verify_code" placeholder="验证码" maxlength="6"
			 placeholder-class="placeholder" />

			<button @click="getCode" :disabled="disabled" class="get-vcode">
				{{countdown}} <text v-show="timestatus"> 秒后重新获取</text>
			</button>
		</view>


		<view class="row b-b">
			<text class="tit">昵称</text>
			<input class="input" type="text" v-model="regData.nick" placeholder="用户昵称" maxlength="50" placeholder-class="placeholder" />
		</view>


		<view class="row b-b">
			<text class="tit">密码</text>
			<input class="input" type="number" v-model="regData.password" placeholder="6位数密码" maxlength="6" placeholder-class="placeholder" />
		</view>

		<view class="row b-b">
			<text class="tit">推荐人</text>
			<input class="input" type="text" v-model="regData.from_mem_id" disabled="true" placeholder-class="placeholder" />
		</view>

		<button class="add-btn" @click="confirm">立即注册</button>
	</view>
</template>

<script>
	import helper from "../../components/js/helper.js" //公共变量js
	export default {
		data() {
			return {
				countdown: '获取验证码',
				disabled: false,
				timestatus: false,
				clear: '',
				regData: {
					mobile: '',
					password: '',
					verify_code: '',
					from_mem_id: '',
					nick: '',
					head_img_url: '',
					sex: 1
				}
			}
		},
		onShow() {



			// 			uni.request({
			// 		
			// 			url: 'xxxxxxxxxxx',
			// 			dataType: 'text',
			// 			data: {
			// 				url: window.location.href.split('#')[0]
			// 			},
			// 			success: res => {
			// 				var s = JSON.parse(res.data);
			// 				console.log(s.data);
			// 				
			// 				 jweixin.config({
			// 					 debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
			// 					 appId: s.data.appId, // 必填，公众号的唯一标识
			// 					 timestamp: s.data.timestamp, // 必填，生成签名的时间戳
			// 					 nonceStr: s.data.nonceStr, // 必填，生成签名的随机串
			// 					 signature: s.data.signature.toLowerCase(), // 必填，签名，见附录1
			// 					 jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage","onMenuShareQQ","onMenuShareWeibo","onMenuShareQZone"]
			// 				});	
			// 				
			// 				jweixin.ready(function () {
			// 
			// 			});
			// 			},
			// 			fail: err => {
			// 				console.log('request fail', err);
			// 			}
			// 	});	



		},
		onLoad(option) {
			console.log(option)
			// let title = '用户注册';
			// uni.setNavigationBarTitle({
			// 	title
			// })
			if (option.pid) {
				this.regData.from_mem_id = option.pid
				console.log(this.regData.from_mem_id)
			}
		},
		methods: {
			// 获取验证码
			getCode() {
				var that = this;
				if (that.regData.mobile == '') {
					uni.showToast({
						title: '请输入手机号码',
						icon: 'none'
					});
				} else if (!helper.c_mobile.test(that.regData.mobile)) {
					uni.showToast({
						title: '手机号码错误',
						icon: 'none'
					});
				} else {
					that.disabled = true; //禁用点击
					uni.request({
						url: this.$serverUrl + '/app/getVerifyCode/' + that.regData.mobile,
						header: {
							"Content-Type": "application/json"
						},
						data: {

						},
						method: "POST",
						success: res => {
							if (res.data.success) {
								uni.showToast({
									title: res.data.message,
									icon: 'none'
								});
								that.countdown = 60;
								that.timestatus = true;
								that.clear = setInterval(that.countDown, 1000);
							} else {
								that.disabled = false; //获取失败开启点击
							}
						}
					})
				}
			},
			// 倒计时
			countDown() {
				var that = this;
				if (!that.countdown) {
					that.disabled = false;
					that.timestatus = false;
					that.countdown = '获取验证码';
					clearInterval(that.clear);
				} else {
					that.countdown--;
				}
			},
			//提交
			confirm() {
				let data = this.regData;

				if (!helper.c_mobile.test(data.mobile)) {
					this.$api.msg('请填写正确的手机号码');
					return;
				}

				if (!data.verify_code) {
					this.$api.msg('请填写验证码');
					return;
				}

				if (!data.password) {
					this.$api.msg('请填写密码');
					return;
				}

				// 提交请求
				uni.request({
					url: this.$serverUrl + '/app/member/register',
					header: {
						"Content-Type": "application/json"
					},
					data: data,
					method: "POST",
					success: (e) => {
						if (e.data.success) {
							this.$api.msg('注册成功~');





							// #ifdef APP-PLUS

							uni.reLaunch({
								url: "/pages/index/index"
							})
							// #endif		


							// #ifdef H5
							window.location.href = 'https://51gsc.com/app/pmxf'
							// #endif










						} else {
							this.$api.msg(e.data.message);
						}
					},
					fail: (e) => {
						uni.showModal({
							content: "请求失败，请重试！",
							showCancel: false
						})
					}
				})

			},
		}
	}
</script>

<style lang="scss">
	page {
		background: $page-color-base;
		padding-top: 16upx;
	}

	.row {
		display: flex;
		align-items: center;
		position: relative;
		padding: 0 30upx;
		height: 110upx;
		background: #fff;

		.tit {
			flex-shrink: 0;
			width: 120upx;
			font-size: 30upx;
			color: $font-color-dark;
		}

		.input {
			flex: 1;
			font-size: 30upx;
			color: $font-color-dark;
		}

		.icon-shouhuodizhi {
			font-size: 36upx;
			color: $font-color-light;
		}
	}

	.default-row {
		margin-top: 16upx;

		.tit {
			flex: 1;
		}

		switch {
			transform: translateX(16upx) scale(.9);
		}
	}

	.add-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690upx;
		height: 80upx;
		margin: 60upx auto;
		font-size: $font-lg;
		color: #fff;
		background-color: $base-color;
		border-radius: 10upx;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}

	.get-vcode {
		/* position: absolute;*/
		right: 5%;
		top: 10upx;
		height: 80upx;
		line-height: 80upx;
		font-size: 30upx;
		color: #FFFFFF;
		background: #0779B5;
		border-radius: 50upx;
		border: 1upx solid #CCCCCC;
	}
</style>
